<template>
	<view class="container">
		<div class="content">
			<view class="box" v-for='(item,index) in list' :key='index' @click="toDetail(item)">
				<view class="item">
					<view class="img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="text">
						{{item.text}}
					</view>
				</view>
			</view>
		</div>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [
					{
						id:1,
						img: require('@/static/chat-list/xianliao.jpg'),
						text: '闲聊',
						content:'你好！'
					},
					{
						id:2,
						img: require('@/static/chat-list/xianliao.jpg'),
						text: '专项练习',
						content:'Please act as my friend and talk to me from now on, I need to practice my oral English'
					},
					{
						id:3,
						img: require('@/static/chat-list/xianliao.jpg'),
						text: '雅思提高',
						content:'From now on, you re Ellie, I m your friend, and you introduce yourself'
					},
					{
						id:4,
						img: require('@/static/chat-list/xianliao.jpg'),
						text: '文字冒险游戏',
						content:'Randomly start a text interactive game'
					},
					{
						id:5,
						img: require('@/static/chat-list/xianliao.jpg'),
						text: 'AI绘图',
						content:''
					}
				]
			};
		},
		methods:{
			toDetail(item){
				if(item.id == 5 ) return uni.showToast({title:'这个东西还没有做',icon:'none'})
				if(item.id ==1){
					uni.navigateTo({
						url:`/pages/text-chat/text-chat?text=${item.content}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/chat/chat?text=${item.content}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ddd;
		height: 100%;
	}

	.container {
		padding: 30rpx 0;
		background-color: #000;
		height: 100%;

		.content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.item {
					width: 340rpx;
					border-radius: 14rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.img {
						width: 100%;
						height: 240rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 14rpx 14rpx 0 0;
						}
					}
					.text {
						padding: 10rpx;
						text-align: center;
						color: #000;
						background-color: #FFF;
						border-radius: 0 0 14rpx 14rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>